// mixins

// 移动端尺寸适配  使用方法 width:rem(100); 这里的100 就是设计图尺寸
@function rem($px) {
  // $px * 375 / 75000
  @return ($px * 0.01) + rem;
}

$primary-color: #1890ff; // 全局主色
$success-color: #52c41a; // 成功色
$warning-color: #faad14; // 警告色
$error-color: #f5222d; // 错误色
$danger-color: #ff7875; // 危险色
$white-color: #fff; // 白色
$info-color: #909399; //info

$link-color: #1890ff; // 链接色
$heading-color: rgba(0, 0, 0, 0.85); // 标题色
$text-color: rgba(0, 0, 0, 0.65); // 主文本色
$text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
$disabled-color: rgba(0, 0, 0, 0.25); // 失效色
$border-color-base: #d9d9d9; // 边框色
$box-shadow-base: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff; // 浮层阴影

// pc

$font-size-base: 14px; // 主字号
$border-radius-base: 4px; // 组件/浮层圆角

$size-lg: 16px;
$size-md: 14px;
$size-sm: 12px;

$padding-lg: 10px 24px; // containers
$padding-md: 8px 16px; // small containers and buttons
$padding-sm: 6px 12px; // Form controls and items

$margin-lg: 24px; // containers
$margin-md: 16px; // small containers and buttons
$margin-sm: 12px; // Form controls and items
$margin-xs: 8px; // small items
$margin-xss: 4px; // more small

$radius-lg: 6px;
$radius-md: 4px;
$radius-sm: 2px;

// mobile

$m-font-size-base: rem(14); // 主字号
$m-border-radius-base: rem(4); // 组件/浮层圆角

$m-size-lg: rem(16);
$m-size-md: rem(14);
$m-size-sm: rem(12);

$m-padding-lg: rem(10) rem(24); // containers
$m-padding-md: rem(8) rem(16); // small containers and buttons
$m-padding-sm: rem(6) rem(12); // Form controls and items

$m-margin-lg: rem(24); // containers
$m-margin-md: rem(16); // small containers and buttons
$m-margin-sm: rem(12); // Form controls and items
$m-margin-xs: rem(5); // small items
$m-margin-xss: rem(4); // more small

$m-radius-lg: rem(6);
$m-radius-md: rem(4);
$m-radius-sm: rem(2);

// Mixins语法: 使用@mixin+name 定义代码块，使用@include+name引入代码块

// 未知宽高的内容横向纵向居中 注意父元素需要  position: relative; 使用方法 @include center;
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 原素内容横向纵向都居中 使用方法 @include centerChild;
@mixin centerChild {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 原素内容纵向居中  使用方法 @include centerItems;
@mixin centerItems {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

// 文本末尾添加省略号 单行  使用方法 @include ellipsis;
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 宽度不固定，适合多行以及移动端显示 使用方法 @include ellipsisMroe(3);
@mixin ellipsisMroe($n) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
}

// 居中显示图片 取宽高长的那部分自适应  缺点:不铺满 会有空白 优点: 图片完全显示  使用方法 @include imgCenterAll;
@mixin imgCenterAll {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

// 居中显示图片 取宽高短的那部分自适应  缺点:图片会被截取 优点: 铺满   使用方法 @include imgCenterPortion;
@mixin imgCenterPortion {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 移动端 边框一像素实现  注释掉 需要自行根据条件修改
@mixin mBorderT {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  top: 0;
  left: 0;
  border-top: 1px solid #ccc;
  transform: scaleY(0.5);
}

@mixin mBorderB {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #ccc;
  transform: scaleY(0.5);
}
